import React from 'react';
import "@/views/Login/Login.scss"
import { admin_login,admin_detail } from '../../api/api';
import { Form, Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux'
import { json } from 'stream/consumers';

interface Props {

}
interface State {
    state: Object
}
function Login(props: Props) {
    var dispatch = useDispatch()
    var navigate = useNavigate()
    //表单验证通过时执行
    var onFinish = (formvalues: any) => {
        console.log(formvalues);
        //发起登陆请求
        admin_login(formvalues).then((res) => {
            if (res.data.code == 200) {
                message.success('登录成功')
                localStorage.setItem('token', res.data.data.token)
                dispatch({ type: 'INFO', payload: res.data.data.adminname })
                admin_detail({adminname:res.data.data.adminname}).then((res)=>{
                    // console.log(res.data.data);
                   localStorage.setItem('checkedKeys', JSON.stringify(res.data.data[0].checkedKeys))
                    
                  })
                navigate('/index/home')
            } else {
                message.error(res.data.message)
            }
        })
    }
    //表单验证失败时执行
    var onFinishFailed = (formvalues: any) => {
        console.log(formvalues);
    }

    //账号的校验
    // var userValidator = (rule:any, value:string, callback:any)=>{
    //     if(  /^1[3-9]\d{9}$/.test( value ) ){
    //         callback();
    //     }else{
    //         callback(new Error('请输入正确的手机号!'))
    //     }
    // }
    return (
        <div className='login'>
            <Form
                className='form'
                style={{ maxWidth: 600 }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    name="adminname"
                    rules={[{ required: true }]}
                >
                    <Input prefix={<UserOutlined />} />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password prefix={<LockOutlined />} />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        登陆
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Login;